<script lang="ts" setup>
import { ref } from 'vue';
import { CarouselProps, MenuProps} from 'ant-design-vue';
import { useRouter } from "vue-router";

const dotPosition = ref<CarouselProps['dotPosition']>('right');

const items = ref<MenuProps['items']>([
  {
    key: '/sports',
    label: '热门',
    title: '热门',
  },
  {
    key: '/sports/premierleague',
    label: '英超',
    title: '英超',
  },
  {
    key: '/sports/laliga',
    label: '西甲',
    title: '西甲',
  },
  {
    key: '/sports/bundesliga',
    label: '德甲',
    title: '德甲',
  },
  {
    key: '/sports/seriea',
    label: '意甲',
    title: '意甲',
  },
  {
    key: '/sports/ucl',
    label: '欧冠',
    title: '欧冠',
  },
  {
    key: '/sports/nba',
    label: 'NBA',
    title: 'NBA',
  },
  {
    key: '/sports/cba',
    label: 'CBA',
    title: 'CBA',
  },
]);

interface DataItem {
  title: string;
}
const data: DataItem[] = [
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
  {
    title: 'Ant Design Title 4',
  },
  {
    title: 'Ant Design Title 5',
  },
  {
    title: 'Ant Design Title 6',
  },
];

const router = useRouter();
// 当前要高亮的菜单项
const current = ref<string[]>([])
// 监听路由变化，更新高亮菜单项
router.afterEach((to, from, next) => {
  current.value = [to.path];
})

// 路由跳转事件
const doMenuClick = ({key}) => {
  router.push({
    path: key
  });
}
</script>

<template>
  <!-- 头部 -->
  <div id="sports_header">
    <a-row :wrap="false">
      <a-col flex="100px">
      </a-col>
      <a-col flex="auto" style="display: flex;">
        <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" @click="doMenuClick"
                style="background: transparent;"/>
      </a-col>
    </a-row>
  </div>
  <a-layout>

    <!-- 内容 -->
    <a-layout-content>
      <div :style="{ background: '#fff', padding: '32px'}">
        <a-carousel effect="fade" autoplay :dot-position="dotPosition">
          <div><h3>1</h3></div>
          <div><h3>2</h3></div>
          <div><h3>3</h3></div>
          <div><h3>4</h3></div>
        </a-carousel>
      </div>

      <a-list item-layout="horizontal" :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta
              description="Ant Design, a design language for background applications, is refined by Ant UED Team"
            >
              <template #title>
                <a href="https://www.antdv.com/">{{ item.title }}</a>
              </template>
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-layout-content>

  </a-layout>
</template>

<style scoped>
/* For demo */
:deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

:deep(.slick-slide h3) {
  color: #fff;
}
</style>
